<template>
  <baseCard title="云资源使用明细" :height="height" :contentStyle="{ paddingTop: '0rem' }">
    <!-- <template #right>
      <VptSelectBlock
        :defaultSelect="defaultTabs"
        :tabList="tabOption"
        @changeTab="changeTab"
        :fontSize="'0.14rem'"
        :height="'0.24rem'"
      ></VptSelectBlock>
    </template> -->
    <arco-table :columns="columns" :data="tableData" :pagination="false" :scrollbar="true" :scroll="scroll"
      :rowClass="rowClassName" :hoverable="true">
      <template #app_name="{ record }">
        {{ record.app_name }}
      </template>
      <template #app_num="{ record }">
        {{ record.app_num }}
      </template>
      <template #vcpu_total="{ record }">
        {{ addThousandsSeparator(record.vcpu_total) }}
      </template>
      <template #cpu_usage_year="{ record }">
        {{ record.cpu_usage_year }}
      </template>
      <template #cpu_usage_max="{ record }">
        {{ record.cpu_usage_max }}
      </template>
      <template #memory_available="{ record }">
        {{ addThousandsSeparator(record.memory_available) }}
      </template>
      <template #memory_usage_year="{ record }">
        {{ record.memory_usage_year }}
      </template>
      <template #memory_usage_max="{ record }">
        {{ record.memory_usage_max }}
      </template>
      <template #disk_total="{ record }">
        {{ addThousandsSeparator(record.disk_total) }}
      </template>
      <template #disk_used_percent="{ record }">
        {{ record.disk_used_percent }}
      </template>
    </arco-table>
  </baseCard>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import {
  getYzyListData
} from "@/api/mockApi/application.js";
const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "" },
  chartType: { type: String, default: "init" },
});
const tableData = ref([]);
onMounted(() => {
  getAppList();
});
const defaultTabs = ref("0");

const getAppList = (
  params = {
    process_status: defaultTabs.value,
  }
) => {
  getYzyListData(params).then((res) => {
    tableData.value = res.data || [];
  });
};
const tabOption = [
  { id: "0", name: "全部" },
  { id: "1", name: "告警" },
  { id: "2", name: "提示" },
  { id: "3", name: "正常" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const scroll = {
  y: "100%",
};

let columns = reactive([
  {
    title: "应用名称",
    slotName: "app_name",
    align: "left",
    width: 140,
  },

  {
    title: "主机数",
    slotName: "app_num",
    align: "right",
    width: 100,
  },
  {
    title: "CPU(核)",
    slotName: "vcpu_total",
    align: "right",
    width: 100,
  },
  {
    title: "CPU使用率月均值(%)",
    slotName: "cpu_usage_year",
    align: "right",
    width: 120,
  },
  {
    title: "CPU使用率月峰值(%)",
    slotName: "cpu_usage_max",
    align: "right",
    width: 120,
  },
  {
    title: "内存(GB)",
    slotName: "memory_available",
    align: "right",
    width: 100,
  },
  {
    title: "内存使用率月均值(%)",
    slotName: "memory_usage_year",
    align: "right",
    width: 155,
  },
  {
    title: "内存使用率月峰值(%)",
    slotName: "memory_usage_max",
    align: "right",
    width: 155,
  },
  {
    title: "存储(GB)",
    slotName: "disk_total",
    align: "right",
    width: 80,
  },
  {
    title: "存储使用率(%)",
    slotName: "disk_used_percent",
    align: "right",
    width: 80,
  },
]);

const rowClassName = (record, index) => {
  if (record.process_status == 2) {
    return "row-warn-status";
  } else if (record.process_status == 1) {
    return "row-danger-status";
  }
  return "";
};

const getCellValue = (value) => {
  var parts = value.split("/");
  parts = parts.map(function (item) {
    return addThousandsSeparator(item);
  });
  return parts.join("/");
};

const emit = defineEmits(["changeTab"]);
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");

:deep(.arco-table-cell.arco-table-cell-align-left) {
  justify-content: center !important;
}

:deep(.arco-table-cell.arco-table-cell-align-right) {
  justify-content: center !important;
}

:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}

.name-text {
  display: block;
  width: 1.4rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmbug .vpt-em-red {
  // color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

:deep(.arco-table-hover:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover) {
  background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 98% !important;
}

:deep(.arco-table-td) {
  background: #fff !important;
}
</style>